<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    几个注意点：
      1.关于组件名：
        一个单词组成：
          第一种写法（首字母小写）：school
          第二种写法（首字母大写）：School
        多个单词组成：
          第一种写法（kebab-case命名）：my-school
          第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
        备注：
          (1).组件名尽可能回避HTML中已有的元素名称，例如：h2(报错)、H2(等于h2标签)都不行。
          (2).可以使用name配置项指定组件在开发者工具中呈现的名字。(第三方组件库或大型项目可能会这么用)
      2.关于组件标签：
        第一种写法：<school></school>
        第二种写法：<school/>
        备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
      3.一个简写方式：
        const school = Vue.extend(options) 可简写为：const school = options
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{msg}}</h1>
    <hr/>
    <!-- 第三步：编写组件标签 -->
    <my-school></my-school>
    <!-- <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2> -->
    <hr/>
    <student></student>
    <!-- <h2>学生名称：{{studentName}}</h2>
    <h2>学生年龄：{{age}}</h2> -->
  </div>
  <div id="root2">
    <student></student>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。

    // 第一步：创建school组件
    const school = {
      name: 'xuexiao',
      template: `
        <div>
          <h2>学校名称：{{schoolName}}</h2>
          <h2>学校地址：{{address}}</h2>
          <button @click="showName">点我提示学校名</button>
        </div>
      `,
      data() {
        return {
          schoolName: '学校名称',
          address: '学校地址'
        }
      },
      methods: {
        showName() {
          alert(this.schoolName)
        }
      }
    }

    // 创建student组件
    const student = Vue.extend({
      template: `
        <div>
          <h2>学生名称：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
      `,
      data() {
        return {
          studentName: '张三',
          age: 18
        }
      }
    })

    Vue.component('student', student)

    new Vue({
      el: "#root",
      // 第二部：注册组件（局部组件）
      components: {MySchool: school},
      data: {
        msg: '你好！'
      }
    })

    new Vue({
      el: "#root2"
    })
  </script>
</body>
</html>